import CustomInput from '@/components/antd-comp/input/CustomInput'
import CustomSelect from '@/components/antd-comp/select/CustomSelect'
import { CommmonSmallJudgmentCommon } from '@/pages/workflow/components/CommonSmallTemp'
import { variableSourceTypeOptions_tool } from '@/pages/workflow/constants'
import { useSourceOptions } from '@/pages/workflow/hooks/use-source-options'
import { useEffect, useState } from 'react'

/* 输入模块 */
export default function ToolInputCont({ info, sourceOptions, editData }) {
  /* list */
  const [optionList, setOptionList] = useState([])
  const { options } = useSourceOptions(info)
  useEffect(() => {
    if (Array.isArray(info.inputList) && info.inputList.length > 0) {
      const newList = info.inputList.map(item => ({
        ...item,
        value: item.value ? item.value : (item.valuet ? item.valuet : undefined), //解决迭代器的时候value重置问题
        value_selector: item.value_selector ? item.value_selector : (item.valuet  ?  item.valuet.split(',') : undefined),
      }))

      setOptionList(newList)
    } else {
      setOptionList([])
    }
  }, [info.inputList])

  return (
    <div className="flexCol InputCont_case">
      <div className="flexRowStart columns-title--dGaYetSzjjUdXN_u9_8J">
        <div className="input-head" style={{ width: '140px' }}>
          参数名称
        </div>
        <div className="input-head w-[calc((92%-140px)*0.4)]">参数来源</div>
        <div className="input-head w-[calc((92%-140px)*0.4)]">参数值</div>
      </div>
      {/* options */}
      {optionList.map((item, i) => (
        <div key={i} className="flexCol InputCont_marTop">
          <div className="flexRowStart flexRowJustBet">
            <div className="flexRowStart flexRowJustBet w-[92%]">
              {/* 参数名称 */}
              <div style={{ width: '140px' }}>
                <CustomInput disabled value={item.variable} style={{ width: '100%' }} />
              </div>
              {/* 变量类型 */}
              <div className="inputCont_end" style={{ width: 'calc(100% - 140px)' }}>
                <CustomSelect
                  style={{ width: '40%' }}
                  onChange={e => {
                    const newList = optionList.map((obj, index) => {
                      if (index === i) {
                        return {
                          ...obj,
                          type: e,
                          value: e === 'default' && item.defaultName ? item.defaultName : undefined,
                          value_selector: undefined
                        }
                      }
                      return obj
                    })
                    setOptionList(newList)
                    editData({
                      inputList: newList
                    })
                  }}
                  value={item.type}
                  options={variableSourceTypeOptions_tool}
                  placeholder="参数来源"
                />
                {/* 类型引用组建 */}
                <CommmonSmallJudgmentCommon
                  item={item}
                  optionList={optionList}
                  options={options}
                  i={i}
                  Change={newList => {
                    setOptionList(newList)
                    editData({
                      inputList: newList
                    })
                  }}
                ></CommmonSmallJudgmentCommon>
              </div>
            </div>
          </div>
          {item.required && !item.value && <div className="custom-params-invalid_single">参数值不可为空</div>}
        </div>
      ))}
    </div>
  )
}
